<template>
  <!-- 养老收费账单  -->
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex a-center">
            <div class="search-item d-flex a-center m-l20">
                <label>项目名称</label>
                <el-input class="m-l10" v-model="form.projectName" placeholder="请输入项目名称" clearable></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>年度</label>
                <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="form.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                />
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>月度</label>
                <el-select class="m-l10" v-model="form.month" clearable>
                    <el-option v-for="i in 12" :key="i" :label="`${i}月`" :value="`${i}`"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                        @click="onImport"
                        class="button_edit m-r10"
                >
                    导入
                </el-button>
                <el-button
                        class="button_edit"
                        @click="templateDownload"
                >
                    模版下载
                </el-button>
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                index-width="120"
                selection
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handle-selection-change="handleSelectionChange"
        ></public-table>
    </div>

  <!-- 导入excel   -->
    <public-dialog
            :title="'导入养老食堂账单数据'"
            :width="'40%'"
            :confirmButtonTitle="'确认'"
            v-model:visible="visible"
            @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    drag
                    action="#"
                    multiple
                    :http-request="uploadFile"
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    将文件拖到此处或<em>点击上传</em>
                </div>
            </el-upload>
        </div>
    </public-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDivider, ElMessage, ElMessageBox, ElDatePicker, ElUpload, ElLoading,
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {companyApi, interestManagement, retirementApi} from "@/api/businessFinance";
import {exportExcelFile} from "@/common/utils/GlobalUtils";
import PublicDialog from "@/components/PublicDialog.vue";
import {UploadFilled} from "@element-plus/icons-vue";

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'retirementApi.getBfFinanceAgedCharge',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'retirementApi.exportBfFinanceAgedCharge',
    tableName:'养老收费表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    selectedArr,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport,
    handleSelectionChange
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    projectName: '',
    year:'',
    month:''
}

tableOption.value = [
    { label: "项目名称", prop: "projectName", minWidth: 80 },
    { label: "姓名", prop: "name", minWidth: 80 },
    { label: "性别", prop: "sex", minWidth: 80 },
    { label: "缴费时间", prop: "checkInTime", minWidth: 100 },
    { label: "护理等级", prop: "nurseLevel", minWidth: 80 },
    { label: "费用开始时间", prop: "payStartTime", minWidth: 110 },
    { label: "费用结束时间", prop: "payEndTime", minWidth: 110 },
    { label: "缴费天数", prop: "payNumber", minWidth: 80 },
    { label: "应收护理费", prop: "nurseCost", minWidth: 100 },
	{ label: "应收餐食费", prop: "foodMoney", minWidth: 100 },
    { label: "应收房间费", prop: "bedFee", minWidth: 100  },
    { label: "应收管理费", prop: "managementCost", minWidth: 100  },
    { label: "应收保证金", prop: "earnestMoney", minWidth: 100  },
    { label: "应收定金", prop: "bargainMoney", minWidth: 80 },
    { label: "应收床品费", prop: "beddingMoney", minWidth: 100  },
    { label: "应收医疗费", prop: "medicalMoney", minWidth: 100  },
    { label: "应收临时费用", prop: "temporaryMoney", minWidth: 120  },
    { label: "应收总金额", prop: "allMoney", minWidth: 100 },
    // { label: "实收护理费", prop: "realNurseCost",width:'100'  },
    // { label: "实收餐费", prop: "realFoodMoney",width:'100'  },
    // { label: "实收床位费", prop: "realBedFee",width:'100'  },
    // { label: "实收管理费", prop: "realManagementCost",width:'100'  },
    // { label: "实收保证金", prop: "realEarnestMoney",width:'100'  },
    // { label: "实收定金", prop: "realBargainMoney",width:'100'  },
    // { label: "实收床品费", prop: "realBeddingMoney",width:'100'  },
    // { label: "实收医疗费", prop: "realMedicalMoney",width:'100'  },
    // { label: "实收临时费用", prop: "realTemporaryMoney",width:'100'  },
    // { label: "实收总金额", prop: "realAllMoney" ,width:'100' },
    // { label: "欠费", prop: "arrears" },
    { label: "养老类型", prop: "elderlyCareType", minWidth: 80 },
    { label: "应收补贴", prop: "subsidy", minWidth: 80 },
    // { label: "养老收费账单唯一标识", prop: "agedChargeId",width:'100'  },
    { label: "创建时间", prop: "createTime", minWidth: 200 },

];


const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}

/**
 * 查询银行列表
 *
 */
const bankAccountList = ref([]);
const getBankList = () => {
    companyApi.getBankList().then(res=>{
        if(res.code === '200'){
            bankAccountList.value = res.data;
        }
    });
}

/**
 * 养老收费模版下载
 */
const templateDownload = () => {
    retirementApi.bfFinanceAgedChargeTemplate().then(res=>{
        if(res){
            exportExcelFile(res,'养老收费账单模版');
        }else{
            ElMessage.error('下载失败!');
        }
    })
}

/**
 * 导入收费账单
 */
const visible = ref(false);
const onImport = () => {
    visible.value = true;
}

/**
 * 导入模版弹窗的确认按钮
 */
const onConfirm = () => {

}

/**
 * 文件上传方法
 * @param file
 */
const uploadFile = (file) => {
    const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
    });
    let uploadFile = new FormData();
    uploadFile.append("file", file.file);
    retirementApi.importExcelBfFinanceAgedCharge(uploadFile).then(res=>{
        if (res.code === '200') {
            loading.close();
            ElMessage.success("上传成功!");
            visible.value = false;
            getData({
                pageNum:1,
                pageSize:10,
                param:{
                }
            });
        }else{
            loading.close();
            ElMessage.error("上传失败!请联系管理员!");
        }
    });
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10,
        param:{
            ...form.value
        }
    });
    getCompanyList();
    getBankList();
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
